<template>
<div>
	<Form ref="changepasswordform" :rules="rules" :model="model" :label-width="100" mgt5 style="max-width:500px;">
		<FormItem prop="currentPassword" label="旧密码">
			<Input v-model="model.currentPassword" type="password" placeholder="旧密码"></Input>
		</FormItem>
		<FormItem prop="newPassword" label="新密码">
			<Input v-model="model.newPassword" type="password" placeholder="需字母、数字、大写字符、特殊字符，不低于8位"></Input>
		</FormItem>
		<FormItem prop="passwordCheck" label="确认密码">
			<Input v-model="model.passwordCheck" type="password" placeholder="确认密码"></Input>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="handleChangePassword">保存</Button>
		</FormItem>

	</Form>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'
import { passwordValidator } from '@common/lib/validates'

@Component
export default class ChangePassword extends AbpBase{
	model:any = {
		currentPassword: '',
		newPassword: '',
		passwordCheck: ''
	}
	get rules() {
		const passwordCheckValidator = (rule, value, callback) => {
			if (value != this.model.newPassword) callback(new Error('两次密码输入不一致，请重新输入'));
			else {
				callback();
			}
		};

		return {
			currentPassword: [
				{ required: true, message: '请填写当前密码', trigger: 'blur' }
			],
			newPassword: [
				{ required: true, validator: passwordValidator, trigger: 'blur' }
			],
			passwordCheck: [
				{ required: true, validator: passwordCheckValidator, trigger: 'blur' }
			],
		}
	}
	handleChangePassword() {
		this.validate('changepasswordform', async () => {
			var response = await this.post('Admin/ChangePassword', this.model);
			if(response.success) {
				this.success('修改成功');
			}
		});
	}

}
</script>
